<!--
 * @Author: wuzhen
 * @Date: 2019-01-22 11:25:11
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-11 09:12:21
 * @Description: 公用菜单组件
 -->
<template>
  <Menu :theme="$theme.siderColor" width="auto" accordion :active-name="activeName" :open-names="openNames" @on-select="onSelect" class="i-layout-sider-menu" v-if="menus.length > 0 && showMenu">
    <!-- 左侧展开 -->
    <template v-if="isCollapsed">
      <Dropdown class="i-layout-sider-collapse" placement="right-start" v-for="(item, index) in menus" :key="index" @on-click="onSelectDrop">
        <MenuItem :name="item.webRouterKey">
        <i class="icon">
          <wz-icon :name="item.iconCls || 'fa-system'" scale="1.5" />
        </i>
        </MenuItem>
        <DropdownMenu slot="list" v-if="item.children && item.children.length > 0">
          <DropdownItem v-for="(child, key) in item.children" :selected="activeName === child.name" :name="child.webRouterKey" :key="key">{{ child.text }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </template>
    <!-- 左侧关闭 -->
    <template v-else>
      <template v-for="(item, index) in menus">
        <Submenu :name="item.webRouterKey" :key="index" v-if="item.children && item.children.length > 0">
          <template slot="title">
            <i class="icon">
              <wz-icon :name="item.iconCls || 'fa-system'" scale="1.5" />
            </i>
            <span>{{ item.text }}</span>
          </template>
          <template :name="child.webRouterKey" v-for="(child, index) in item.children">
            <Submenu :name="child.webRouterKey" v-if="child.children && child.children.length > 0" :key="index + 1000">
              <template slot="title">{{ child.text }}</template>
              <MenuItem :name="v.webRouterKey" v-for="(v, index) in child.children" :key="index + 10000">{{ v.text }}</MenuItem>
            </Submenu>
            <MenuItem :name="child.webRouterKey" :key="index + 1000" v-else>{{
              child.text
            }}</MenuItem>
          </template>
        </Submenu>
        <template v-else>
          <MenuItem :name="item.webRouterKey" :key="index">
          <i class="icon">
            <wz-icon :name="item.iconCls || 'fa-system'" scale="1.5" />
          </i>
          <span>{{ item.text }}</span>
          </MenuItem>
        </template>
      </template>
    </template>
    <slot></slot>
  </Menu>
</template>

<script>
export default {
  props: {
    // 菜单
    menus: {
      type: Array,
      default: () => []
    },
    // 是否展开菜单
    isCollapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showMenu: true
    };
  },
  computed: {
    activeName() {
      return this.$route.meta.activeMenu;
    },
    openNames() {
      // 展开菜单
      const openNames = this.$route.matched.map(v => v.name).slice(1);
      return openNames;
    }
  },
  watch: {
    isCollapsed() {
      this.showMenu = false;
      this.$nextTick(() => {
        this.showMenu = true;
      });
    }
  },
  methods: {
    // 点击菜单
    onSelect(name) {
      this.$emit("on-select", name);
    },
    onSelectDrop(name) {
      this.$emit("on-select", name);
    }
  }
};
</script>

<style lang="less">
.i-layout-sider {
  &-menu {
    .icon {
      position: relative;
      top: 2px;
    }
    &.ivu-menu-dark {
      .ivu-menu-item-active {
        color: #fff !important;
      }
      .ivu-select-dropdown {
        background: #191a23;
        .ivu-dropdown-item {
          color: #fff;
          &:hover,
          &-selected {
            background-color: #2d8cf0;
            color: #fff;
          }
        }
      }
    }
    .ivu-select-dropdown {
      margin: 5px 0 5px 3px;
    }
  }
  &-collapse {
    display: block;
  }
}
</style>
